import type { IDirective, ICustomDirectiveElement } from '@/directives';

const directive: IDirective = {
  mounted(el: ICustomDirectiveElement, binding) {
    el.onMouseover = () => {
      if (!binding.arg) {
        throw new Error('arg is necessary');
      }
      binding.value(binding.arg, true);
    };
    el.onMouseleave = () => {
      if (!binding.arg) {
        throw new Error('arg is necessary');
      }
      binding.value(binding.arg, false);
    };
    el.addEventListener('mouseover', el.onMouseover);
    el.addEventListener('mouseleave', el.onMouseleave);
  },
  beforeUnmount(el: ICustomDirectiveElement) {
    el.removeEventListener('mouseover', el.onMouseover);
    el.removeEventListener('mouseleave', el.onMouseleave);
    delete el.onMouseover;
    delete el.onMouseleave;
  },
};
export default directive;
